<template>
  <div class="authentication">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="200px" class="demo-ruleForm">
      <el-form-item label="上传身份证图片" prop="img">
        <div class="shangchuan">
          <el-upload  class="avatar-uploader" action="" :on-change="change2" accept="image/jpg,image/png,image/jpeg" :show-file-list="false" :auto-upload="false">
            <img v-if="ruleForm.idFrontside" :src="ruleForm.idFrontside" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <el-upload class="avatar-uploader" action="" :on-change="change3" accept="image/jpg,image/png,image/jpeg" :show-file-list="false" :auto-upload="false">
            <img v-if="ruleForm.idBackside" :src="ruleForm.idBackside" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
      </el-form-item>
      <el-form-item label="真实姓名" prop="name">
        <el-input v-model="ruleForm.idName"></el-input>
      </el-form-item>
      <el-form-item label="身份证号码" prop="identityCard">
        <el-input v-model="ruleForm.idNumber"></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="site">
        <el-input v-model="ruleForm.idAddress"></el-input>
      </el-form-item>
      <el-form-item label="绑定手机号" prop="number">
        <el-input v-model="ruleForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="telephone">
        <el-input v-model="ruleForm.code"></el-input>
        <el-button @click="send">发送验证码</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交认证</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import qs from 'qs'
import { Verification, add } from './index'
import { getItem } from '@/utils/store'
export default {
  data() {
    return {
      ruleForm: {
        userId: '',
        idFrontside: '', // 法人省份证正面
        idBackside: '', // 法人省份证背面
        code: '',//1111
        idAddress: '',
        idName: '',
        identityCard: '',
        site: '',
        phone:'',
        idNumber: '',
      },
      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        identityCard: [{ required: true, message: '请输入身份证号码', trigger: 'blur' }],
        site: [{ required: true, message: '请输入地址', trigger: 'blur' }],
        number: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
      },
    }
  },
  created() {
    this.ruleForm.userId = getItem('XIE_XIN').user_id
  },
  methods: {
    /* 发送验证码 */
    async send() {
      let ids = this.ruleForm.phone
      const { data } = await Verification(ids)
      if (data.code == 903) {
        this.$message.success(data.msg)
      }else{
        this.$message.error(data.msg)
      }
    },
    /* 新增 */
    async submitForm() {
      try {
        let datas = this.ruleForm

        const { data } = await add(datas)
        if (data.code == 0) {
          this.$message.success('新增个人信息成功')
          this.$router.push('/userhomes')
        }else{
          this.$message.error(data.msg)
        }
        console.log(data)
      } catch (error) {
        console.log(error)
      }
    },

    change2(file) {
      this.getBase64(file.raw).then((res) => {
        this.ruleForm.idFrontside = res
        this.idcard()
      })
    },
    change3(file) {
      this.getBase64(file.raw).then((res) => {
        this.ruleForm.idBackside = res
      })
    },
    idcard() {
      let data = { image: this.ruleForm.idFrontside }
      let data2 = qs.stringify(data) //转字符串

      this.$http.post('/account/person/ocr/idcard', data2).then((res) => {
        console.log(res, 4444)
        if (res.data.code == 0) {
          this.ruleForm.idNumber = res.data.data.idNumber
          this.ruleForm.idName = res.data.data.name
          this.ruleForm.idAddress = res.data.data.address
          this.$message.success('识别身份成功')
        }
      })
    },
    getBase64(file) {
      return new Promise(function (resolve, reject) {
        let reader = new FileReader()
        let imgResult = ''
        reader.readAsDataURL(file)
        reader.onload = function () {
          imgResult = reader.result
        }
        reader.onerror = function (error) {
          reject(error)
        }
        reader.onloadend = function () {
          resolve(imgResult)
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.authentication {
  margin: 40px;
  .demo-ruleForm {
    width: 800px;
    .shangchuan {
      display: flex;
      justify-content: center;
      .upload_field {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100px;
        height: 130px;
        margin-right: 20px;
        border: 1px dashed rgb(147, 147, 147);
        .upload_preview {
          width: 100%;
          .upload_img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;

      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      .avatar-uploader-icon {
        margin-right: 20px;
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
        border: 1px solid #777;
      }
      .avatar {
        width: 178px;
        height: 178px;
        display: block;
      }
    }
  }
}
</style>
